<template>
	<view class="circle-card" @click="handleClick">
		<!-- 圈子头像和基本信息 -->
		<view class="card-header">
			<view class="avatar-container">
				<image :src="circle.circleAvatar" class="circle-avatar"
					mode="aspectFill" />
				<view v-if="showStatus && circle.approvalStatus" class="status-badge"
					:class="getStatusClass(circle.approvalStatus)">
					{{ getStatusText(circle.approvalStatus) }}
				</view>
			</view>

			<view class="circle-info">
				<view class="circle-name">{{ circle.circleName }}</view>
				<view class="circle-description">{{ circle.circleDescription || '暂无描述' }}</view>
			</view>
		</view>

		<!-- 圈子统计信息 -->
		<view class="card-stats">
			<view class="stat-item">
				<text class="stat-number">{{ circle.memberCount || 0 }}</text>
				<text class="stat-label">成员</text>
			</view>
			<view class="stat-divider"></view>
			<view class="stat-item">
				<text class="stat-number">{{ circle.postCount || 0 }}</text>
				<text class="stat-label">帖子</text>
			</view>
			<view class="stat-divider"></view>
			<view class="stat-item">
				<text class="stat-number">{{ circle.heatScore || 0 }}</text>
				<text class="stat-label">热度</text>
			</view>
		</view>

		<!-- 圈子创建信息 -->
		<view class="card-footer">
			<view class="owner-info">
				<text class="owner-label">圈主:</text>
				<text class="owner-name">{{ circle.ownerUser }}</text>
			</view>
			<view class="create-time">
				{{ formatTime(circle.createdTime) }}
			</view>
		</view>

		<!-- 热度指示器 -->
		<view class="heat-indicator" v-if="circle.heatScore > 50">
			🔥
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps,
		defineEmits
	} from 'vue'

	const props = defineProps({
		circle: {
			type: Object,
			required: true
		},
		showStatus: {
			type: Boolean,
			default: false
		}
	})

	const emit = defineEmits(['click'])

	const handleClick = () => {
		emit('click', props.circle)
	}

	const getStatusClass = (status) => {
		switch (status) {
			case 'pending':
				return 'status-pending'
			case 'approved':
				return 'status-approved'
			case 'rejected':
				return 'status-rejected'
			default:
				return 'status-pending'
		}
	}

	const getStatusText = (status) => {
		switch (status) {
			case 'pending':
				return '审核中'
			case 'approved':
				return '已通过'
			case 'rejected':
				return '已拒绝'
			default:
				return '未知'
		}
	}

	const formatTime = (time) => {
		if (!time) return ''
		const date = new Date(time)
		const now = new Date()
		const diff = now - date

		if (diff < 60000) {
			return '刚刚'
		} else if (diff < 3600000) {
			return `${Math.floor(diff / 60000)}分钟前`
		} else if (diff < 86400000) {
			return `${Math.floor(diff / 3600000)}小时前`
		} else if (diff < 2592000000) {
			return `${Math.floor(diff / 86400000)}天前`
		} else {
			return date.toLocaleDateString()
		}
	}
</script>

<style lang="scss" scoped>
	.circle-card {
		background: white;
		border-radius: 24rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		position: relative;
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.98);
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.12);
		}
	}

	.card-header {
		display: flex;
		margin-bottom: 24rpx;
	}

	.avatar-container {
		position: relative;
		margin-right: 24rpx;

		.circle-avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 24rpx;
			border: 4rpx solid #f0f0f0;
		}

		.status-badge {
			position: absolute;
			top: -8rpx;
			right: -8rpx;
			padding: 8rpx 16rpx;
			border-radius: 20rpx;
			font-size: 20rpx;
			color: white;

			&.status-pending {
				background: #ffa500;
			}

			&.status-approved {
				background: #52c41a;
			}

			&.status-rejected {
				background: #ff4d4f;
			}
		}
	}

	.circle-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.circle-name {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 8rpx;
			line-height: 1.2;
		}

		.circle-description {
			font-size: 28rpx;
			color: #666;
			line-height: 1.4;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}

	.card-stats {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 24rpx 0;
		background: linear-gradient(135deg, #f8f9ff 0%, #e8f4fd 100%);
		border-radius: 16rpx;
		margin-bottom: 24rpx;

		.stat-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.stat-number {
				font-size: 32rpx;
				font-weight: bold;
				color: #667eea;
				margin-bottom: 4rpx;
			}

			.stat-label {
				font-size: 24rpx;
				color: #999;
			}
		}

		.stat-divider {
			width: 2rpx;
			height: 40rpx;
			background: #e0e0e0;
		}
	}

	.card-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.owner-info {
			display: flex;
			align-items: center;

			.owner-label {
				font-size: 24rpx;
				color: #999;
				margin-right: 8rpx;
			}

			.owner-name {
				font-size: 28rpx;
				color: #667eea;
				font-weight: 500;
			}
		}

		.create-time {
			font-size: 24rpx;
			color: #999;
		}
	}

	.heat-indicator {
		position: absolute;
		top: 16rpx;
		right: 16rpx;
		font-size: 32rpx;
		animation: fire 2s infinite alternate;
	}

	@keyframes fire {
		0% {
			transform: scale(1);
		}

		100% {
			transform: scale(1.1);
		}
	}
</style>